<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="分类名称" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="展示顺序" width="100" prop="sort" />
      <el-table-column label="分类名称" prop="name" />
      <el-table-column label="分类图片">
        <template slot-scope="scope">
          <PicViewer :value="scope.row.img" tableCell />
        </template>
      </el-table-column>
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="u({ id: row.id })" name="编辑" />
          <auth-button @click="d({ id: row.id })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="分类名称" prop="name" verify>
          <el-input
            v-model="form.data.name"
            placeholder="请输入分类名称"
            maxlength="30"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="展示顺序" prop="sort" verify>
          <Sort v-model="form.data.sort" />
        </el-form-item>
        <el-form-item label="分类图片" prop="img" verify>
          <Imgpond
            v-model="form.data.img"
            value-type="string"
            :count="1"
            aspectRatio="230/144"
          />
        </el-form-item>
        <el-form-item
          label="关联攻略"
          prop="strategyId"
          :rules="{ required: true, message: '必选项', trigger: 'change' }"
          class="text-center"
          v-if="form.show"
        >
          <el-transfer
            style="text-align: left; display: inline-block"
            v-model="transferNode.value"
            filterable
            :right-default-checked="transferNode.rightDefaultChecked"
            :titles="['待选列表', '已选列表']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            @change="handleChange"
            @right-check-change="handleRightCheckChange"
            :data="transferNode.data"
            v-if="!transferNode.loading"
          >
            <span slot-scope="{ option }">
              {{ option.label }}
            </span>
          </el-transfer>
          <div v-loading="transferNode.loading"></div>
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/strategy-classify',
      list: {
        filter: {
          name: ''
        }
      }
    }, {
      /**
       * 弹框打开初始化数据
       * @return Void
       * @author: wangpq
       */
      afterRetrieve() {
        const strategyId = this.form.data.strategyId
        if (
          strategyId &&
          strategyId.constructor === Array &&
          strategyId.length > 0
        ) {
          this.$set(this.transferNode, 'value', strategyId)
          this.$set(this.transferNode, 'rightDefaultChecked', strategyId)
        } else {
          this.$set(this.transferNode, 'value', [])
          this.$set(this.transferNode, 'rightDefaultChecked', [])
        }
      },
    }),
  data () {
    return {
      transferNode: {
        loading: true, // 穿梭框加载中
        data: [], // 穿梭框数据源
        value: [], // 穿梭框右侧选中的值
        rightDefaultChecked: [] // 穿梭框右侧选中初始值
      }
    }
  },
  watch: {
    // 监听弹框打开
    'form.show': {
      handler (nv, ov) {
        if (nv) {
          this.strategiesList()
        }
      },
      deep: true
    },
    'form.status': {
      handler (nv, ov) {
        if (nv) {
          this.transferNode = {
            loading: true, // 穿梭框加载中
            data: [], // 穿梭框数据源
            value: [], // 穿梭框右侧选中的值
            rightDefaultChecked: [] // 穿梭框右侧选中初始值
          }
        }
      },
      deep: true
    }
  },
  methods: {
    /**
     * 穿梭框右侧列表元素被用户选中 / 取消选中时触发
     * @param {Array} value
     * @return Void
     * @author: wangpq
     */
    handleRightCheckChange (value) {
      this.$set(this.form.data, 'strategyId', value)
    },
    /**
     * 穿梭框右侧列表元素变化时触发
     * @param {Array} value
     * @return Void
     * @author: wangpq
     */
    handleChange (value, direction, movedKeys) {
      if (direction === 'left') {
        this.$set(this.form.data, 'strategyId', [])
      }
    },
    /**
     * 获取攻略列表
     * @return Void
     * @author: wangpq
     */
    strategiesList () {
      this.$set(this.transferNode, 'loading', true)
      this.$POST('/one-travel-api/strategy/queryForList')
        .then(res => {
          if (res.errorCode == '00000' && res.data) {
            this.$set(
              this.transferNode,
              'data',
              res.data.map(_ => ({
                key: _.id,
                label: _.name,
                disabled: false
              }))
            )
          }
        })
        .finally(_ => {
          this.$set(this.transferNode, 'loading', false)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-transfer) {
  .el-transfer-panel__filter {
    width: auto !important;
  }
}
</style>
